<template>
    <div>
        <a-input-search v-model:value="addr"
                        @input="onInput"   placeholder="搜索地址" enter-button @search="onSearch" />
        <div ref="amapContainer" class="mt-4 w-full h-96"></div>
    </div>
</template>
    
<script setup lang='ts'>

import "@amap/amap-jsapi-types";
import config from '/@/views/extend/setting/amap'
import { ref } from "vue";
import { onMounted } from "vue";
import { message } from "ant-design-vue";
import { search, initAMap } from "/@/views/extend/components/AMap/amap";
import { useAttrs } from "vue";
import { watchOnce } from "@vueuse/shared";
import { watch } from "vue";

//@ts-ignore
window._AMapSecurityConfig = {
    securityJsCode: config.securityJsCode,
}

const amapContainer = ref<HTMLElement>()
const addr = ref('')
const lnglat = ref([]);

const onInput = (event) => {
  const inputValue = event.target.value;
  // 在这里处理输入事件，inputValue是输入框的当前值
  addr.value = inputValue

  $emits('update:value', {lnglat: lnglat.value, poi: addr.value })
  $emits('change', { lnglat:lnglat.value, poi: addr.value })
};
const onSearch = (v) => {
    if (!v) {
        message.error('请输入地址')
        return
    }
    search(v);
}
const $props = defineProps<{
    value: any
}>()
const $emits = defineEmits<{
    (e: 'update:value', val: any): void
    (e: 'change', val: any): void
}>()

onMounted(() => {
    var marker: AMap.Marker;
    const addMarker = (map, info) => {
        if (marker) {
            map.remove(marker)
        }
        marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: info.lnglat,
            anchor: 'bottom-center'
        });
        map.add(marker)
        map.setFitView(marker);
      lnglat.value = info.lnglat;
    }
    initAMap(amapContainer.value!).then((map: AMap.Map) => {
        watch(() => $props, (nv) => {
            if (!nv.value) {
                return
            }
            map.setCenter(nv.value)
            addMarker(map, nv.value)
            addr.value = nv.value.poi;
        }, {
            immediate: true,
            deep: true
        })

        map.on('click', function (e) {
          let lnglat = e.lnglat.toString().split(',');
          AMap.plugin('AMap.Geocoder', function() {
            var geocoder = new AMap.Geocoder({
              city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            })

            geocoder.getAddress(lnglat, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                // result为对应的地理位置详细信息
                if (result.regeocode) {
                  addr.value = result.regeocode.formattedAddress
                  $emits('update:value', { lnglat, poi: addr.value })
                  $emits('change', { lnglat, poi: addr.value })
                  addMarker(map, { lnglat, poi: addr.value })
                }
              }
            })
          })
        });
    })
})
</script>
    
<style></style>
